import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import dateFormat from 'dateformat'

import {
  inject,
  observer,
} from 'mobx-react'

import {
  withStyles,
  Grid,
  Paper,
  List,
  Avatar,
  ListItem,
  ListItemText,
  Typography,
} from '@material-ui/core'

import UserWrapper from './user'
import infoStyle from './styles/info-style'

const TopicItem = ({ topic, onClick }) => (
  <ListItem button onClick={onClick}>
    <Avatar src={topic.author.avatar_url} />
    <ListItemText
      primary={topic.title}
      secondary={`最新回复：${dateFormat(topic.last_reply_at, 'yyyy-mm-dd')}`}
    />
  </ListItem>
)

TopicItem.propTypes = {
  topic: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
}

@inject(stores => (
  {
    appState: stores.appState,
    user: stores.appState.user,
  }
)) @observer
class UserInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
    if (!this.props.user.isLogin) {
      this.props.history.replace('/user/login')
    } else {
      this.props.appState.getUserDetail()
      this.props.appState.getUserCollection()
    }
  }

  goToTopic(id) {
    this.props.history.push(`/detail/${id}`)
  }

  render() {
    const { classes } = this.props
    const { recentTopics, recentReplies } = this.props.user.detail
    const { list } = this.props.user.collections
    const topics = recentTopics
    const replies = recentReplies
    const collections = list
    return (
      <UserWrapper>
        <div className={classes.root}>
          <Helmet>
            <title>Bao info</title>
          </Helmet>
          <Grid container spacing={16} alignItems="stretch">
            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>最近发布的话题</span>
                </Typography>
                <List>
                  {
                    topics.length > 0 ? (
                      topics.map(topic => (
                        <TopicItem
                          topic={topic}
                          key={topic.id}
                          onClick={() => this.goToTopic(topic.id)}
                        />
                      ))
                    ) : (
                      <Typography align="center">
                        <span>最近没有发布过话题</span>
                      </Typography>
                    )
                  }
                </List>
              </Paper>
            </Grid>
            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>新的回复</span>
                </Typography>
                <List>
                  {
                    replies.length > 0 ? (
                      replies.map(topic => (
                        <TopicItem
                          topic={topic}
                          key={topic.id}
                          onClick={() => this.goToTopic(topic.id)}
                        />
                      ))
                    ) : (
                      <Typography align="center">
                        <span>最近没有新的回复</span>
                      </Typography>
                    )
                  }
                </List>
              </Paper>
            </Grid>
            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>收藏的话题</span>
                </Typography>
                <List>
                  {
                    collections.length > 0 ? (
                      collections.map(topic => (
                        <TopicItem
                          topic={topic}
                          key={topic.id}
                          onClick={() => this.goToTopic(topic.id)}
                        />
                      ))
                    ) : (
                      <Typography align="center">
                        <span>还没有收藏话题</span>
                      </Typography>
                    )
                  }
                </List>
              </Paper>
            </Grid>
          </Grid>
        </div>
      </UserWrapper>
    )
  }
}

UserInfo.wrappedComponent.propTypes = {
  appState: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
}
UserInfo.propTypes = {
  classes: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
}

export default withStyles(infoStyle)(UserInfo)
